<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/6/6
  Time: 下午7:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CNCS饰品分析系统 - 涨幅榜</title>
    <!-- 图标字体 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@6.0.0/css/all.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="/css/styles2.css">
</head>

<body>
<div class="container">
    <header class="header">
        <h1>CNCS饰品数据分析平台</h1>
        <p>实时追踪饰品市场动态</p>
    </header>

    <nav class="nav">
        <ul>
            <li><a href="Homepage.jsp">首页</a></li>
            <li><a href="transaction.jsp">成交榜</a></li>
            <li><a href="rental.jsp">成租榜</a></li>
            <li><a href="increase.jsp" >涨幅榜</a></li>
            <li><a href="decrease.jsp" class="active">跌幅榜</a></li>
            <li><a href="#">更多功能待研发</a></li>
        </ul>
    </nav>

    <div class="page-header">
        <h2>饰品跌幅排行榜</h2>
        <p>展示当前市场上价格跌幅最大的饰品</p>
    </div>

    <div class="filter-bar">
        <div class="filter-group">
            <label>时间范围:</label>
            <select id="timeRange">
                <option value="today">今日</option>
                <option value="yesterday">昨日</option>
                <option value="this_week">本周</option>
                <option value="this_month">本月</option>
            </select>
        </div>
        <div class="filter-group">
            <label>排序筛选:</label>
            <select id="sortBy">
                <option value="amount">按金额</option>
                <option value="percentage">按百分比</option>
            </select>
        </div>
        <button class="btn-filter" onclick="filterData()">筛选</button>
    </div>

    <div class="table-container">
        <table class="data-table" id="dataTable">
            <thead>
            <tr>
                <th>排名</th>
                <th>饰品名称</th>
                <th>当前价格</th>
                <th>跌幅金额</th>
                <th>跌幅</th>
            </tr>
            </thead>
            <tbody>
            <!-- 动态数据填充 -->
            </tbody>
        </table>
    </div>

    <footer class="footer">
        <p>© 2025 CNCS饰品分析系统 | 技术支持：ZX团队 | 更多功能开发中...</p>
    </footer>
</div>

<script>
    // 页面加载时自动获取数据
    document.addEventListener('DOMContentLoaded', () => {
        filterData(); // 默认加载今日按金额排序的数据
    });

    // 绑定按钮点击事件（确保 DOM 加载完成）
    window.addEventListener('load', () => {
        const filterBtn = document.querySelector('.btn-filter');
        if (filterBtn) {
            filterBtn.addEventListener('click', filterData);
        } else {
            console.error("未找到筛选按钮");
        }
    });

    // 封装 fetch 请求
    function fetchData(timeRange, sortBy) {
        const url = '/getDecreaseData?timeRange=' + encodeURIComponent(timeRange) + '&sortBy=' + encodeURIComponent(sortBy);
        console.log("请求URL:", url); // 调试信息
        return fetch(url).then(res => {
            if (!res.ok) throw new Error('HTTP error! status: ' + res.status);
            return res.json();
        });
    }

    // 筛选按钮触发的主函数
    function filterData() {
        const timeRange = document.getElementById("timeRange").value;
        const sortBy = document.getElementById("sortBy").value;

        console.log("Fetching data with timeRange:", timeRange, "sortBy:", sortBy);

        clearTable(); // 清空旧数据

        fetchData(timeRange, sortBy)
            .then(data => {
                console.log("Data received:", data);
                renderTable(data);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                alert('加载数据失败，请刷新重试');
                clearTable(); // 清空表格防止旧数据残留
            });
    }

    // 渲染表格函数
    function renderTable(items) {
        const tbody = document.querySelector('#dataTable tbody');
        tbody.innerHTML = '';

        const MAX_ROWS = 10;
        const safeNumber = val => (val ? parseFloat(val).toFixed(2) : '无');

        for (let i = 0; i < Math.min(items.length, MAX_ROWS); i++) {
            const item = items[i];
            const name = item.name || '无';
            const price = safeNumber(item.price);
            const decreaseAmount = safeNumber(item.decreaseAmount);
            const decreasePercentage = safeNumber(item.decreasePercentage);

            const tr = document.createElement('tr');
            tr.innerHTML =
                '<td data-label="排名">' + (i + 1) + '</td>' +
                '<td data-label="饰品名称" class="item-name"><span>' + name + '</span></td>' +
                '<td data-label="当前价格">¥' + price + '</td>' +
                '<td data-label="跌幅金额">¥' + decreaseAmount + '</td>' +
                '<td data-label="跌幅">↓' + decreasePercentage + '%</td>';
            tbody.appendChild(tr);
        }

        // 补足行数到 10 行
        for (let i = items.length; i < MAX_ROWS; i++) {
            const tr = document.createElement('tr');
            tr.innerHTML =
                '<td data-label="排名">' + (i + 1) + '</td>' +
                '<td data-label="饰品名称" class="item-name"><span>无</span></td>' +
                '<td data-label="当前价格">无</td>' +
                '<td data-label="跌幅金额">无</td>' +
                '<td data-label="跌幅">无</td>';
            tbody.appendChild(tr);
        }
    }

    // 清空表格
    function clearTable() {
        const tbody = document.querySelector('#dataTable tbody');
        if (tbody) {
            tbody.innerHTML = '';
        }
    }
</script>

</body>
</html>


